<template>
  <div class="popup-channel-container">
      <!-- 我的频道 -->
      <div class="my-channel">
              <van-cell title="我的频道">
        <template #default>
            <van-button size='small' round type='danger' plain  @click="isEdit = !isEdit">
                <span>{{isEdit? '完成' : '编辑'}}</span>
            </van-button>
        </template>
    </van-cell>
    <van-grid :gutter="10">
        <van-grid-item
        v-for="(item,index) in channels"
        :class="{'active-channel': activeIndex === index,'mychannel-grid-item':activeIndex != index}"
        :key="item.id"
        :text="item.name"
        @click="onSwitchChannel(index)"
        >
        <template #icon>
            <van-icon name="close"  @click="onRemove(index,item)" v-if="isEdit && index!=0"/>
        </template>
        </van-grid-item>
    </van-grid>
      </div>
      <!-- 推荐频道 -->
      <div class="channel-recommend">
        <van-cell title="频道推荐">
        </van-cell>
            <van-grid :gutter="10">
        <van-grid-item
        v-for="item in recommendList"
        :key="item.id"
        :text="item.name"
        @click="onAdd(item)"
        />
    </van-grid>
      </div>
  </div>
</template>

<script>
import { getAllChannelsList } from 'network/news'
import { addUserChannels, deleteUserChannels } from 'network/user'
import { mapState } from 'vuex'
import { storageMinxis } from '../../../mixins/storage'
export default {
  name: 'PopupChannel',
  mixins: [storageMinxis],
  props: {
    channels: {
      type: Array,
      required: true
    },
    activeIndex: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      // 所有频道列表
      allChannelsList: [],
      // 我的频道关闭按钮的显示与隐藏
      isEdit: false
    }
  },
  created () {
    this.onloadAllChannelsList()
  },
  methods: {
    // 获取所有频道列表
    async onloadAllChannelsList () {
      const { data: res } = await getAllChannelsList()
      // 对所有频道列表赋值
      this.allChannelsList = res.data.channels
    },
    // 添加到我的频道
    // 代码是没有问题的,后端人员调整了添加频道的接口
    async onAdd (channel) {
      this.channels.push(channel)
      console.log(channel)
      if (this.userState) {
        const res = await addUserChannels({
          channels: [
            {
              id: channel.id,
              seq: this.channels.length
            }
          ]
        })
        console.log(res)
      } else {
        this.setItem('userChannels', this.channels)
      }
    },
    // 从我的频道移除
    async onRemove (index, channel) {
      if (index <= this.activeIndex) {
        this.$emit('update-active')
      }
      this.channels.splice(index, 1)
      console.log(this.channels)
      if (this.userState) {
        const res = await deleteUserChannels(channel.id)
        console.log(res)
      } else {
        this.setItem('userChannels', this.channels)
      }
    },
    // 切换频道
    onSwitchChannel (index) {
      if (this.isEdit === true) {
        return ''
      } else {
        this.$emit('switchChannel', index)
      }
    }
  },
  computed: {
    // 推荐列表
    ...mapState(['userState']),
    recommendList () {
      return this.allChannelsList.filter(val1 => {
        return !this.channels.some(val2 => {
          return val1.id === val2.id
        })
      })
    }
  }
}
</script>

<style lang='less' scoped>
    .popup-channel-container{
        padding-top: 55px;
        .my-channel{
           /deep/ .van-icon{
                position: absolute;
                left: 100%;
                top:0;
                transform: translate(-50%,-50%);
                font-size: 16px;
            }
            .van-cell{
                font-size: 16px;
            }
            .van-button{
                width: 50px;
                height: 25px;
            }
          /deep/ .active-channel{
                    .van-grid-item__text{
                        font-size: 14px;
                        color: pink;
                        }
          }
          /deep/ .mychannel-grid-item{
                .van-grid-item__text{
                font-size: 14px;
                color: #222222;
                 }
          }
          /deep/  .van-grid-item__content{
                background: #f4f5f6;
                position: relative;
            }
        /deep/ .van-grid-item__icon-wrapper{
                position: unset;
            }
        }
        .channel-recommend{
            margin-top: 36px;
             .van-cell{
                font-size: 16px;
            }
            /deep/  .van-grid-item__text{
                font-size: 14px;
                color: #222222;
                 }
            /deep/  .van-grid-item__content{
                background: #f4f5f6;
            }
        }
    }
</style>
